import { useEffect, useState } from "react";
import Header from "@/components/Header";
import { Input, Table, Button, TableColumnsType, Spin, Modal } from "antd";
import "./css/person.scss";
import Zu from "./zuList/index";
import { DataType } from "./interface/interfaces";
const { Search } = Input;
const onSearch = (value: string) => console.log(value);

const data: DataType[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

export default function EnterpriseCustom() {
  const [spinning, setSpinning] = useState(false);
  const [openZu, setOpenZu] = useState(false); //租赁记录
  useEffect(() => {
    setSpinning(true);
    setTimeout(() => {
      setSpinning(false);
      1;
    }, 1000);
  }, []);
  const columns: TableColumnsType<DataType> = [
    {
      title: "企业名称",
      width: 100,
      dataIndex: "name",
      key: "id",
    },
    {
      title: "负责人",
      width: 100,
      dataIndex: "age",
      key: "name",
    },
    {
      title: "联系方式",
      dataIndex: "address",
      key: "native",
      width: 150,
    },
    {
      title: "注册时间",
      dataIndex: "address",
      key: "phone",
      width: 150,
    },
    {
      title: "消费次数",
      dataIndex: "address",
      key: "time",
      width: 150,
    },
    {
      title: "当前订单",
      dataIndex: "address",
      key: "status",
      width: 150,
    },
    {
      title: "操作",
      key: "operation",
      width: 150,
      render: () => {
        return (
          <div style={{ textAlign: "center" }}>
            <Button type="link">修改信息</Button>
            <Button type="link" onClick={() => setOpenZu(true)}>
              租赁记录
            </Button>
            <Button type="link">举报</Button>
          </div>
        );
      },
    },
  ];
  return (
    <div className="storeBigBox">
      <Spin spinning={spinning}>
        <Header title="企业客户" />
        <div className="searchBox">
          <div>
            <span
              style={{
                marginTop: "5px",
                display: "inline-block",
                marginRight: "5px",
              }}
            >
              企业名称
            </span>
            <Search
              placeholder="请输入内容"
              onSearch={onSearch}
              style={{
                width: 200,
              }}
            />
          </div>
          <div style={{ marginLeft: "50PX" }}>
            <span
              style={{
                marginTop: "5px",
                display: "inline-block",
                marginRight: "5px",
              }}
            >
              负责人
            </span>
            <Search
              placeholder="请输入内容"
              onSearch={onSearch}
              style={{
                width: 200,
              }}
            />
          </div>
          <div style={{ marginLeft: "50PX" }}>
            <span
              style={{
                marginTop: "5px",
                display: "inline-block",
                marginRight: "5px",
              }}
            >
              联系方式
            </span>
            <Search
              placeholder="请输入内容"
              onSearch={onSearch}
              style={{
                width: 200,
              }}
            />
          </div>
        </div>
        <div className="storeContent">
          <Button
            type="primary"
            style={{ float: "right", marginBottom: "10px" }}
          >
            添加客户
          </Button>
          <Table
            pagination={{
              defaultPageSize: 3, //默认煤业显示条数
              defaultCurrent: 1, //默认当前页数第二页
              pageSizeOptions: ["3", "5", "10"], //每页显示多少条
              locale: {
                items_per_page: "条/页",
              },
            }}
            columns={columns}
            dataSource={data}
            scroll={{ y: 350 }}
          />
        </div>
        {/* 租赁框 */}
        <Modal
          title="租赁信息"
          open={openZu}
          onCancel={() => setOpenZu(false)}
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
          }
        >
          <Zu list={[{ id: 1, status: false }]} />
        </Modal>
      </Spin>
    </div>
  );
}
